<template>
  <view :class="classArr" @click="controller.onClick">
    <i-biz-editor-shell
      :class="ns.b()"
      :value="controller.value"
      :data="controller.data"
      :controller="controller.editor"
      :disabled="controller.state.disabled"
      :readonly="controller.state.readonly"
      @blur="onBlur"
      @focus="onFocus"
      @enter="onEnter"
      @change="onValueChange"
      v-bind="_attrs"
    />
    <view
      v-if="!!(controller.state && controller.state.error)"
      :class="ns.e('error')"
    >
      {{ controller.state ? controller.state.error : "" }}
    </view>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { useNamespace } from "@/use";
import { calcAttrs } from "@/utils";
import { IPanelField } from "@ibiz/model-core";
import { computed, PropType } from "vue";
import { PanelFieldController } from "./i-biz-panel-field.controller";

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelField>,
    required: true,
  },
  controller: {
    type: PanelFieldController,
    required: true,
  },
});

const ns = useNamespace("panel-field");

// 类名控制
const classArr = computed(() => {
  const { id } = props.modelData;
  const result: Array<string | false> = [ns.b(), ns.m(id)];
  if (props.controller) {
    result.push(
      ...props.controller.containerClass,
      ns.is("error", !!props.controller.state.error)
    );
  }
  return result;
});

const _attrs = calcAttrs(props.modelData, props.controller);

const onValueChange = (val: unknown, name?: string): void => {
  props.controller.setDataValue(val, name);
};

const onFocus = (event: MouseEvent): void => {
  props.controller.onFocus(event);
};

const onBlur = (event: MouseEvent): void => {
  props.controller.onBlur(event);
};

const onEnter = (event: MouseEvent): void => {
  props.controller.onEnter(event);
};
</script>
<style lang="scss">
@import "./i-biz-panel-field.scss";
</style>
